<template>
  <div class="bg-white rounded-lg shadow-md p-6">
    <div class="flex justify-between items-center mb-4">
      <h3 class="font-semibold text-gray-800">正在计算的任务列表</h3>
    </div>

    <div class="overflow-x-auto">
      <a-table :columns="columns"
               :data-source="paginatedTasks"
               :pagination="pagination"
               row-key="id"
               :loading="isLoading"
               :total="totalTasks">
        <!-- 表头模板 -->
        <template #title>
          <div class="flex justify-between items-center">
            <span>共 {{ totalTasks }} 个正在运行的任务</span>
            <div class="text-sm text-gray-500">
              <a-button type="link"
                        size="small"
                        @click="handleRefresh">
                <Icon type="reload" /> 刷新
              </a-button>
            </div>
          </div>
        </template>

        <!-- 状态列自定义渲染 -->
        <template #status="{ record }">
          <span :class="getStatusClass(record.status)">
            <Icon :type="getStatusIcon(record.status)"
                  class="mr-1" />
            {{ record.status }}
          </span>
        </template>

        <!-- 进度列自定义渲染 -->
        <template #progress="{ record }">
          <div class="flex items-center">
            <a-progress :percent="record.progress"
                        :status="getProgressStatus(record.progress)"
                        size="small"
                        style="width: 120px" />
            <span class="ml-2 text-sm">{{ record.progress }}%</span>
          </div>
        </template>

        <!-- 操作列自定义渲染 -->
        <template #actions="{ record }">
          <div class="flex space-x-2">
            <a-button type="link"
                      size="small"
                      @click="handleViewTask(record.id)">
              <Icon type="eye" /> 查看
            </a-button>
            <a-button type="link"
                      size="small"
                      @click="handlePauseTask(record.id)">
              <Icon type="pause" /> 暂停
            </a-button>
            <a-button type="link"
                      size="small"
                      danger
                      @click="handleStopTask(record.id)">
              <Icon type="stop" /> 终止
            </a-button>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, ref, computed } from 'vue';

// ✅ 定义表格列结构
const columns = [
  {
    title: '任务名称',
    dataIndex: 'name',
    key: 'name',
    width: 200,
  },
  {
    title: '算法',
    dataIndex: 'algorithm',
    key: 'algorithm',
    width: 150,
  },
  {
    title: '开始时间',
    dataIndex: 'startTime',
    key: 'startTime',
    width: 180,
  },
  {
    title: '预计耗时',
    dataIndex: 'estimatedTime',
    key: 'estimatedTime',
    width: 120,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
    slots: { customRender: 'status' }, // 关联自定义渲染插槽
  },
  //   {
  //     title: '进度',
  //     dataIndex: 'progress',
  //     key: 'progress',
  //     width: 150,
  //     slots: { customRender: 'progress' }, // 关联自定义渲染插槽
  //   },
  {
    title: '资源占用',
    dataIndex: 'resources',
    key: 'resources',
    width: 180,
  },
  //   {
  //     title: '操作',
  //     key: 'action',
  //     width: 180,
  //     slots: { customRender: 'actions' }, // 关联自定义渲染插槽
  //   },
];

// 接收父组件数据
const props = defineProps({
  tasks: { type: Array, required: true },
});

const emits = defineEmits(['viewTask', 'pauseTask', 'stopTask', 'paginationChange']);

// 分页状态
const currentPage = ref(1);
const pageSize = ref(2);
const isLoading = ref(false);

// 计算分页数据
const paginatedTasks = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return props.tasks.slice(start, end);
});

// 总记录数
const totalTasks = computed(() => props.tasks.length);

// 分页配置
const pagination = computed(() => ({
  current: currentPage.value,
  pageSize: pageSize.value,
  total: totalTasks.value,
  showTotal: (total) => `共 ${total} 条记录`,
  showSizeChanger: true,
  onShowSizeChange: (current, size) => {
    currentPage.value = current;
    pageSize.value = size;
    emits('paginationChange', { current, size });
  },
  onChange: (page) => {
    currentPage.value = page;
    emits('paginationChange', { current: page, size: pageSize.value });
  },
}));

// 状态样式映射
const getStatusClass = (status: string) =>
  ({
    进行中: 'text-blue-500',
    待验证: 'text-orange-500',
    即将完成: 'text-green-500',
  }[status] || 'text-gray-500');

const getStatusIcon = (status: string) =>
  ({
    进行中: 'loading',
    待验证: 'exclamation-circle',
    即将完成: 'check-circle',
  }[status] || 'question-circle');

const getProgressStatus = (progress: number) => (progress >= 90 ? 'success' : progress >= 50 ? 'active' : 'normal');

// 事件处理
const handleViewTask = (id: number) => emits('viewTask', id);
const handlePauseTask = (id: number) => emits('pauseTask', id);
const handleStopTask = (id: number) => emits('stopTask', id);
</script>

<style scoped>
.ant-table {
  min-width: 1000px;
  width: 100%;
}

.ant-pagination {
  margin-top: 24px;
  justify-content: flex-end;
}
</style>